<template>
    <el-form 
    :inline="true" 
    :model="formInline" 
    label-width="60px"
    size="small"
    style="margin-top:10px;"
    >
        <template v-for="(item,index) in dataMap.filterArr">
            <template v-if="item.is_search == 1">
                <el-form-item :label="item.title" v-if="item.filter_type == 'text'">
                    <el-input v-model="dataMap.formData[index]"  :placeholder="'请输入'+item.title" clearable />
                </el-form-item>
                <el-form-item :label="item.title" v-if="item.filter_type == 'select'">
                    <el-select 
                        clearable 
                        filterable 
                        v-model="dataMap.formData[index]" 
                        :placeholder="'请选择'+item.title">
                        <el-option v-for="(value,index) in item.listData" :label="value[item.list_data.dropdownValue]" :value="value[item.list_data.dropdownKey]" />
                    </el-select>
                </el-form-item>
                <el-form-item :label="item.title" v-if="item.filter_type == 'multi_select'">
                    <el-select clearable multiple filterable v-model="dataMap.formData[index]" :placeholder="'请选择'+item.title">
                        <el-option v-for="(value,index) in item.listData" :label="value[item.list_data.dropdownValue]" :value="value[item.list_data.dropdownKey]" />
                    </el-select>
                </el-form-item>
                <el-form-item :label="item.title" v-if="item.filter_type == 'checkbox'">
                    <el-checkbox-group v-model="dataMap.formData[index]">
                        <el-checkbox v-for="(value,key) in item.listData" :label="key">{{value}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item :label="item.title" v-if="item.filter_type == 'date'">
                    <el-date-picker
                        v-model="dataMap.formData[index]"
                        type="datetime"
                        placeholder="请选择时间"
                        :shortcuts="shortcuts"
                        value-format="YYYY-MM-DD HH:mm:ss"
                    />
                </el-form-item>
                <el-form-item :label="item.title" v-if="item.filter_type == 'date_range'">
                    <el-date-picker
                        v-model="dataMap.formData[index]"
                        type="datetimerange"
                        range-separator="To"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        value-format="YYYY-MM-DD HH:mm:ss"
                    />
                </el-form-item>
                <el-form-item :label="item.title" v-if="item.filter_type == 'number'">
                    <el-input v-model="dataMap.formData[index]"  :placeholder="'请输入'+item.title" clearable />
                </el-form-item>
                <el-form-item :label="item.title" v-if="item.filter_type == 'number_range'">
                    <el-input style="width: 100px" v-model="dataMap.formData[index+'_start']"  placeholder="最小" />
                    <span style="margin-left:4px;margin-right:4px;">To</span>
                    <el-input style="width: 100px" v-model="dataMap.formData[index+'_end']"  placeholder="最大" />
                </el-form-item>
            </template>
        </template>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
import {reactive,watch} from 'vue'
import httpTool from '../httpRequest'
import { onMounted } from 'vue';
import { deepCopy } from '../util/common';
onMounted(() => {
    getColumn();
});
let dataMap = reactive({
    filterArr:{},
    formData:{},
});
const props = defineProps({
    pageParams:{
        type:Array,
        default:()=>{
            return [];
        }
    },
    getPageFilterUrl:{
        type:String,
        default:()=>{
            return '';
        }
    },
    getPageDataUrl:{
        type:String,
        default:()=>{
            return '';
        }
    }
})
let setDefaultValue = (postData)=>{
    for(let k in dataMap.filterArr){
        if(dataMap.filterArr[k].is_search == 1){
            switch(dataMap.filterArr[k].filter_type){
                case 'text' : case 'date' : case 'multi_select' : 
                if(Object.keys(postData).indexOf(k) === -1){
                    postData[k] = ''; 
                }
                break;
                case 'select' : 
                if(Object.keys(postData).indexOf(k) === -1 || postData[k] == ''){
                    if(dataMap.filterArr[k].data_type == 'int'){
                        postData[k] = 0;
                    }else{
                        postData[k] = '';
                    }  
                }
                break;
                case 'number' : 
                if(Object.keys(postData).indexOf(k) === -1 || postData[k] == ''){
                    postData[k] = 0; 
                }
                break;
                case 'date_range' : 
                if(Object.keys(postData).indexOf(k) === -1){
                    postData[k] = [];
                }
                break;
                case 'number_range' :  
                if(Object.keys(postData).indexOf(k) === -1){
                    postData[k+'_start'] = 0,postData[k+'_end'] = 0;
                }
                break;
            }
        }
    }
}
const emit = defineEmits(['getTableData','getFilter']);
//获取列信息
let getColumn = ()=>{
    httpTool.post(props.getPageFilterUrl,{}).then(response=>{
        if(response.code == 200){
            let sorts = response.data.sorts;
            let tempFilter = response.data.columns
            let newFilter = {};
            //如果存在排序的，那么就重置一下
            if(sorts.length > 0){
                for(let i = 1; i <= sorts.length; i++){
                    for(let j in tempFilter){
                        if(tempFilter[j]['index'] == i){
                            newFilter[j] = tempFilter[j]
                        }
                    }
                }
                dataMap.filterArr = newFilter
            }else{
                dataMap.filterArr = response.data.columns
            }
            emit('getFilter',dataMap.filterArr)
            //需要判断是不是第一次加载，如果是第一次加载，那么跑一次
            if(Object.keys(props.pageParams).length == 0){
                doSearch();
            }
        }
    }).catch(error=>{

    })
}
//提交查询
let doSearch = ()=>{
    //处理默认值
    let postData = deepCopy(dataMap.formData)
    setDefaultValue(postData);
    httpTool.post(props.getPageDataUrl,postData).then(response=>{
        let data = {
            'tableData':response.data.listData,
            'total':response.data.total
        }
        emit('getTableData',data)
    }).catch(error=>{

    })
}
let onSubmit = ()=>{
    doSearch();
}
//监听分页信息
watch([()=>props.pageParams],(newVal)=>{
    let pagination = newVal[0];
    for(let k in pagination){
        dataMap.formData[k] = pagination[k];
    }
    doSearch();
},{deep: true})

//暴露方法给父组件
defineExpose({
  doSearch
});
</script>

<style lang="scss">
</style>